<template>
	<view class="index-content">
		<view class="tabber top flex justify-between">
			<view class="item">
				<text :class="tabItem == 1 ? 'selected' : ''" @tap="switchTab(1)">发现</text>
				<text :class="tabItem == 2 ? 'selected' : ''" @tap="switchTab(2)">我喜欢的</text>
			</view>
			<view class="search"><text class="cuIcon-search"></text></view>
		</view>
		<scroll-view scroll-x class="bg-white nav tags" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="item.id == tagId ? 'cur' : ''" v-for="(item, index) in tagsList" :key="index" @tap="switchTag(item.id)">{{ item.name }}</view>
		</scroll-view>

		<view class="cu-list menu-avatar albums" v-for="(item,index) in albums" :key="index">
			<view class="cu-item">
				<view class="cu-avatar round lg" :style="'background-image:url('+item.avatar+');'"></view>
				<view class="content">
					<view class="text-grey username">{{item.username}}</view>
					<view class="text-gray text-sm flex"><text class="text-cut publish-time">{{item.created_at}}</text></view>
				</view>
				<view class="action"><button class="cu-btn cu-btn round lines-gray">关注</button></view>
			</view>
			<view class="desc">
				{{item.title}}
			</view>
			<view class="images flex flex-wrap">
				<view class="item" v-for="(image, ind) in item.thumb_imgs" :key="ind">
					
					<image :src="image" mode="aspectFill" @tap="previewImage(image,item.mw690_imgs)"></image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabItem: 1,
			tagId: 0,
			page:1,
			tagsList: [
				{
					id: 0,
					name: '全部'
				},
				{
					id: 1,
					name: 'OL制服'
				},
				{
					id: 2,
					name: '紧身裤'
				},
				{
					id: 3,
					name: '长裙'
				},
				{
					id: 4,
					name: '比基尼'
				},
				{
					id: 5,
					name: '瑜伽'
				},
				{
					id: 6,
					name: '热裤'
				},
				{
					id: 7,
					name: '牛仔裤'
				},
				{
					id: 8,
					name: '丝袜'
				},
				{
					id: 9,
					name: 'cosplay'
				},
				{
					id: 10,
					name: '超短裙'
				},
				{
					id: 11,
					name: '皮衣'
				}
			],
			albums:[]
		};
	},
	onLoad() {
		this.getAlbums();
	},
	onReachBottom() {
		this.page++
		this.getAlbums();
	},
	methods: {
		switchTab(index) {
			this.tabItem = index;
		},
		switchTag(id) {
			this.tagId = id;
			this.page = 1;
			this.albums = [];
			this.getAlbums();
		},
		getAlbums(){
			uni.showLoading({
				title:"加载中...",
			})
			this.$http.albums({page:this.page,tag:this.tagId}).then((res) => {
				
				let list = res.data.data.data;
				
				for(let i=0; i< list.length; i++){
					list[i].avatar = "http://cdn.qqoq.net/" + list[i].avatar + "-thumbnail"
					list[i].source_imgs = JSON.parse(list[i].source_imgs);
					list[i].thumb_imgs = [];
					list[i].mw690_imgs = [];
					for(let j=0;j<list[i].source_imgs.length;j++){
						list[i].thumb_imgs.push(list[i].source_imgs[j].replace('large', 'thumb300'));
						list[i].mw690_imgs.push(list[i].source_imgs[j].replace('large', 'mw690'))
					}
				}
				this.albums = this.albums.concat(res.data.data.data);
				
				uni.hideLoading();
				console.log(this.albums);
			})
		},
		previewImage(curr, urls){
			// 预览图片
			uni.previewImage({
				current:curr.replace('thumb300', 'mw690'),
				urls: urls,
				indicator:'number'
			});
		}

	}
};
</script>

<style lang="scss">
.index-content {
	.tabber.top {
		background: #fff;
		padding: 20upx 30upx 10upx 30upx;
		height: 96upx;
		.item {
			text {
				transition: all 0.1s linear;
				font-size: 28upx;
				line-height: normal;
				font-weight: 400;
				min-height: 0;
				padding: 0;
				margin: 0 0.2rem 0 0;
				display: inline;
				color: #c5cad5;

				&.selected {
					font-size: 48upx;
					font-weight: 600;
					color: #111a34;
				}
			}
		}

		.search {
			line-height: 66upx;
		}
	}
	.tags {
		.cu-item {
			transition: all 0.1s linear;
			font-size: 28upx;
			color: #858b9c;
			position: relative;
			// display: inline;
			// margin-right: .3rem;

			padding: 0 10upx;

			&.cur {
				color: #111a34;
				font-weight: 500;
				border-bottom: unset;
				transition: all 0.1s linear;

				&:before {
					position: absolute;
					content: '';
					width: 30upx;
					height: 5upx;
					left: 50%;
					margin-left: -15upx;
					bottom: 20upx;
					background-color: #41485d;
				}
			}
		}
	}

	.albums {
		margin-top:20upx;
		padding: 30upx;
		background: #fff;
		.cu-item {
			.username {
				font-size: 28upx;
				font-weight: 500;
				color: #111a34;
			}
			.publish-time {
				font-size: 22upx;
				color: #c5cad5;
				margin-top: 1upx;
			}
			
			.action{
				width:auto;
				.cu-btn{
					color: #111a34;
					border-color: #111a34;
					.followed{
						color: #c5cad5;
						border-color: #c5cad5;
					}
				}
			}
		}
		
		.desc{
			line-height: 35upx;
			margin-bottom: 15upx;
		}
		
		.images{
			.item{
				width: 33.33333%;
				overflow: hidden;
				background: #f9fafb;
				border: 5upx solid #fff;
			}
		}
	}
}
</style>
